import React from 'react';
import {
  View,
  Text,
  ScrollView,
  TouchableOpacity,
} from 'react-native';

import BasePage from '../common/BasePage';
import Config from '../../config';
import SizeUtils from '../../common/SizeUtils';
import TImage from '../../components/TImage';
import TButton from '../../components/TButton';

const MID_DATA = [{icon:require('../../../resource/images/sport/dibiao/up.png'), width:61, height:69,
                      title:'燃起火焰',
                      desc:'寻找更多所需动力，以便完成您的步数目标'},
            {icon:require('../../../resource/images/sport/dibiao/guide.png'), width:60, height:68,
                      title:'回味大庆',
                      desc:'大庆在你的步数下走出回忆的点滴'},
            {icon:require('../../../resource/images/sport/dibiao/cup.png'), width:62, height:62,
                      title:'点亮地标',
                      desc:'完成步数赢得挑战'},];

export default class SportDibiaoWelcomePage extends BasePage {
  constructor(props) {
    super(props);
  }

  _dealEnterPage() {
    super._dealEnterPage();
  }

  _dealRender() {
    return (
      <ScrollView style={{width:SizeUtils.getWindowSize().width,
          height:SizeUtils.getWindowSize().height,
          backgroundColor:"#4890ce"}} alwaysBounceVertical={false}
            showsVerticalScrollIndicator={false}>
        {this._renderTop()}
        {this._renderMid()}
        {this._renderBottom()}
      </ScrollView>
    )
  }

  _renderTop() {
    return (
      <View style={{paddingTop:SizeUtils.translateDesignHeightToCode(156)}}>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(58), fontWeight:"bold",
            color:"#ffffff", textAlign:"center"}}>
          欢迎来到油田地标
        </Text>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(28), fontWeight:"bold", color:"#ffffff",
            textAlign:"center", paddingTop:SizeUtils.translateDesignHeightToCode(70)}}>
          挑战自己，点亮大庆地标，参加更多锻炼
        </Text>
      </View>
    )
  }

  _renderMid() {
    return (
      <View style={{paddingTop:SizeUtils.translateDesignHeightToCode(250), flexDirection:"column",
            alignItems:"center"}}>
        {MID_DATA.map(
          (data, index) => {
            return this._renderItem(data, index);
          }
        )}
      </View>
    )
  }

  _renderItem(data, index) {
    return (
      <View key={index} style={{width:SizeUtils.getWindowSize().width,
          flexDirection:"row",
          paddingLeft:SizeUtils.translateDesignWidthToCode(106),
          paddingRight:SizeUtils.translateDesignWidthToCode(106),
          paddingBottom:SizeUtils.translateDesignHeightToCode(76)}}>
        <TImage source={data.icon} style={{width:data.width, height:data.height}} />
        <View style={{flexDirection:"column", paddingLeft:SizeUtils.translateDesignWidthToCode(24),}}>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(36), color:"#ffffff"}}>
            {data.title}
          </Text>
          <Text style={{paddingTop:SizeUtils.translateDesignHeightToCode(14),
              fontSize:SizeUtils.translateFontSizeToCode(28), color:"#ffffff"}}>
            {data.desc}
          </Text>
        </View>
      </View>
    )
  }

  _renderBottom() {
    return (
      <View style={{width:SizeUtils.getWindowSize().width, flexDirection:"row", justifyContent:"center",
          paddingTop:SizeUtils.translateDesignHeightToCode(50)}}>
        <TButton label="好的，我知道了" style={{width:SizeUtils.translateDesignWidthToCode(420),
            height:SizeUtils.translateDesignHeightToCode(84)}} onPress={this._onPressSubmit.bind(this)}
          color="#4890ce" />
      </View>
    )
  }

  _onPressSubmit() {
    this.goBack();
  }
}
